<template>
  <div class="mask" :style="{ display: visible ? 'flex' : 'none' }" @click="setVisible(false)">
    <div class="flow" @click.stop>
      <slot></slot>
    </div>
  </div>
</template>
<script setup>
import { ref, defineExpose } from "vue";
const visible = ref(true);

//显示或隐藏组件
const setVisible = (vis) => {
  visible.value = vis
};

/**对外暴露接口 */
defineExpose({
  setVisible
})
</script>
<style scoped>
.mask {
  background-color: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.flow {
  width: 39.5vw;
  height: 25.2vw;
}
</style>
